<!--
 * @Author: ChunLai
 * @Date: 2022-03-28 17:35:09
 * @LastEditTime: 2025-08-06 11:45:55
 * @Description: 
 * @FilePath: \02.bldinsure\src\components\MyLoading.vue
-->
<template>
  <div class="my-loading" v-if="show">
    <van-overlay class="overlay-wrap" z-index="99999" :show="show" :custom-style="{ background: 'rgba(0, 0, 0, 0.5)' }">
      <div class="loading-icon">
        <img class="load_ico" src="https://mschn-pro.oss-cn-beijing.aliyuncs.com/image/appicon/loging.gif" alt="" />
        <div class="loading_text" v-if="loadTexts.length > 0">
          <span class="jump_txt" :style="`--i:${index + 1}`" v-for="(item, index) in loadTexts" :key="`load${index}text`">
            {{ item }}
          </span>
          <span>...</span>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  name: "MyLoading",
  props: {
    show: {
      type: Boolean,
      default: (_) => false,
    },
    text: {
      type: String,
      default: "",
    },
  },
  computed: {
    loadTexts() {
      let res = [];
      if (this.text) {
        res = this.text.split("");
      }
      return res;
    },
  },
};
</script>

<style lang="less" scoped>
.loading-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: inherit;
  margin-top: -50px;
}

.load_ico {
  width: 120px;
  height: 120px;
}

.loading_text {
  position: relative;
  color: #fff;
  font-size: 14px;

  .jump_txt {
    display: inline-block;
    letter-spacing: 1px;
    // animation: loading 2s ease-in-out infinite;
    // animation-delay: calc(0.2s * var(--i));
  }
}
</style>
